<template>
  <div>
    <div class="bar">
      <el-input
              style="width: 240px;margin-right: 20px"
              size="mini"
              placeholder="请输入姓名"
              v-model="searchData.memberName"
              clearable>
      </el-input>

      <el-select v-model="searchData.reservationState"
                 placeholder="请选择状态"
                 size="mini"
                 style="margin-right: 20px">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
<!--      <el-date-picker-->
<!--              style="margin-right: 20px"-->
<!--              v-model="date"-->
<!--              size="mini"-->
<!--              type="daterange"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--              :default-time="['00:00:00', '23:59:59']">-->
<!--      </el-date-picker>-->
      <el-date-picker
              style="margin-right: 20px"
              size="mini"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="searchData.reservationTime"
              type="datetime"
              placeholder="选择日期时间">
      </el-date-picker>

      <el-button type="primary"
                 @click="search"
                 plain size="mini">搜索</el-button>
    </div>
    <template v-if="total > 0">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="7" v-for="item in appointment" >
          <div class="grid-content bg-purple">
            <div>
              <el-avatar :size="50" :src="circleUrl"></el-avatar>
            </div>
            <span>{{item.memberName}}</span><span class="vip">{{level}}</span>
            <div style="overflow: hidden">
              <ul class="left">
                <li>电话号码:</li>
                <li>预约技师:</li>
                <li>预约时间:</li>
              </ul>
              <ul class="right">
                <li>{{item.memberPhoneNumber}}</li>
                <li>{{item.technicianName}}</li>
                <li>{{item.reservationTime}}</li>
              </ul>
            </div>
            <div>
              <img src="../../assets/appointment/already.jpg" alt="">
            </div>
          </div>
        </el-col>

      </el-row>
    </template>
    <template v-else><h1>暂无预约</h1></template>
    <div>
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              prev-text="上一页"
              next-text="下一页"
              layout="prev, pager, next"
              :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {createNamespacedHelpers} from 'vuex';

  const {mapMutations, mapState, mapActions} = createNamespacedHelpers('appointment')
  export default {
    name: "OnceComing",
    data() {
      return {
        options: [
          {
            value:0,
            label:'请选择状态',
          },
          {
            value: 1,
            label: '未到店'
          },
          {
            value: 2,
            label: '已到店'
          },
          {
            value: 4,
            label: '往日预约'
          }
        ],
        searchData:{
          reservationState: 2,
          memberName:'',
          reservationTime:''
        },
        circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        name: 'gzz',
        level: '黄金会员'
      }
    },
    computed: {
      ...mapState(['appointment', 'total', 'pageSize', 'pages', 'currentPage'])
    },
    methods: {
      ...mapActions(['getAppointment']),
      ...mapMutations(['setCurrentPage']),
      handleCurrentChange(val) {
        this.setCurrentPage(val)
      },
      search(){
        this.getAppointment({...this.searchData});
      }
    },
    mounted() {
      this.getAppointment({...this.searchData});
    },
    watch:{
      currentPage(){
        this.getAppointment({...this.searchData});
      }
    }
  }
</script>

<style scoped lang="scss">
  .bar {
    margin-top: 10px;
  }

  img {
    display: inline-block;
    margin: 10px 10px 0;
    width: 80px;
    border-radius: 5px;
  }

  ul {
    display: block;
    margin: 10px 0 0;
    list-style: none;
    padding: 0;
  }

  .left {
    float: left;
    margin-left: 5px;
    color: rgb(142, 142, 142);
  }

  .right {
    float: right;
    margin-right: 5px;
  }

  span {
    font-size: 14px;
  }

  .vip {
    font-size: 12px;
    margin-left: 10px;
    color: gold;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: white;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 10px;
  }

  .row-bg {
    padding: 10px 0;
    margin-bottom: 10px;
    /*background-color: #f9fafc;*/
  }
</style>